<template>
  <div class="list-container" ref="scrollContainer">
    <van-loading v-if="loading" />
    <template v-else>
      <div class="consultation-cards" v-if="list.length > 0">
        <div
          class="consultation-card"
          v-for="item in list"
          :key="item.id"
          @click="router.push(`/doctor/consultation/detail/${item.id}`)"
        >
          <div class="card-header">
            <van-image
              round
              width="40"
              height="40"
              :src="item.patientAvatar || '/avatar-default.png'"
            />
            <div class="patient-info">
              <span class="name">{{ item.patientName }}</span>
              <span class="time">{{ formatTime(item.createTime) }}</span>
            </div>
            <van-tag :type="getStatusType(item.status)">
              {{ getStatusText(item.status) }}
            </van-tag>
          </div>
          <div class="card-content" v-if="item.diagnosis">
            <p class="description">诊断意见: {{ item.diagnosis }}</p>
          </div>
        </div>
      </div>
      <van-empty v-else description="暂无问诊记录" />
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getConsultations } from '@/api/doctor'
import { showFailToast } from 'vant'
import dayjs from 'dayjs'

const router = useRouter()
const props = defineProps({
  status: {
    type: Number,
    default: null
  }
})

const list = ref([])
const loading = ref(false)

// 加载数据
const loadData = async () => {
  if (loading.value) return

  try {
    loading.value = true
    const { data } = await getConsultations({
      status: props.status,
      current: 1,
      size: 999 // 一次性加载所有数据
    })

    list.value = data.records || []
  } catch (error) {
    showFailToast('获取问诊列表失败')
  } finally {
    loading.value = false
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()
})

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待接诊',
    1: '问诊中',
    2: '已完成',
    3: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'danger'
  }
  return typeMap[status] || 'default'
}
</script>

<style lang="scss" scoped>
.list-container {
  height: calc(100vh - 90px); // 减去头部和tab的高度
  overflow-y: auto;
  padding: 12px 12px 80px;
}

.consultation-cards {
  .consultation-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    &:active {
      background-color: #f5f5f5;
    }

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .patient-info {
        flex: 1;
        margin: 0 12px;

        .name {
          font-size: 16px;
          font-weight: 500;
          color: #323233;
          display: block;
        }

        .time {
          font-size: 12px;
          color: #969799;
          margin-top: 4px;
          display: block;
        }
      }

      .van-tag {
        flex-shrink: 0;
      }
    }

    .card-content {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #f5f5f5;

      .description {
        font-size: 14px;
        color: #646566;
        margin: 0;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}
</style>
